<template>
  <el-row :gutter="11" class="area-table-container">
    <el-col :span="11" class="area-main-table">
      <AreaPortraitTable :active-index="activeIndex" :data-type="'province'" :table-data="tableData" @handleCurrentChange="handleCurrentChange" @setShowCity="setShowCity" />
    </el-col>
    <el-col :span="13">
      <!-- :style="{minHeight: clientY+30+'px'}" -->
      <div style="min-height: 370px;" class="area-sub-table">
        <div :style="{top: clientY + 'px'}" class="triangle" />
        <AreaPortraitTable id="sub-table" ref="subAreaTable" :data-type="'city'" :table-data="cityData" />
      </div>
    </el-col>
  </el-row>
</template>
<script>
import AreaPortraitTable from './AreaPortraitTable';
export default {
  name: 'AreaPortrait',
  components: { AreaPortraitTable },
  props: {
    originData: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      cityData: [],
      clientY: 50,
      activeIndex: 0
    };
  },
  computed: {
    tableData() {
      return this.originData;
    }
  },
  created() {
    if (this.tableData[0] && this.tableData[0].City) {
      this.cityData = this.tableData[0].City;
    }
  },
  methods: {
    setShowCity({ clientY, city, index }) {
      const pageTop = document.getElementById('sub-table').getBoundingClientRect().top;
      this.cityData = city;
      this.clientY = clientY - pageTop + 14 + 7;
      this.activeIndex = index;
      this.$refs['subAreaTable'].currentPage = 1;
    },
    handleCurrentChange(index) {
      if (this.tableData[index] && this.tableData[index].City) {
        this.clientY = 50;
        this.cityData = this.tableData[index].City;
        this.activeIndex = 0;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.area-table-container {
  .area-main-table {
    padding-top: 14px;
  }
  .area-sub-table {
    background:rgba(255,255,255,1);
    box-shadow:0px 2px 6px 0px rgba(211,211,211,0.5);
    padding: 14px;
    position: relative;
    overflow: visible;
    min-height: 325px;
    .triangle {
      position: absolute;
      top: 46px;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
      border-width: 6px;
      left: -6px;
      border-right-color: #fff;
      border-left-width: 0;
      filter: drop-shadow(2px 2px 8px rgba(0,0,0,.3));
      &::after {
        content: " ";
        border-left-width: 0;
        border-width: 6px;
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
      }
    }
  }
}
</style>
